import { nextTick, onMounted, reactive, ref } from 'vue'
import { DeptModel, SelectNode } from '@/api/dept/DeptModel'
import { getLeftTreeApi } from '@/api/user/user'
import { ElTree } from 'element-plus'

export default function useLeftTree (emit: any) {
  // emit只能写在vue文件中，包括使用setup语法糖的地方使用，这里不能单独引用
  // const emit = defineEmits(['treeClick'])
  const parentTree = ref<InstanceType<typeof ElTree>>()
  // 树形结构的数据
  const treeData = reactive({
    data: []
  })
  // 选中的数据
  const selectNode = reactive<SelectNode>({
    id: '',
    name: ''
  })
  // 树的属性
  const defaultProps = reactive({
    children: 'children', //设置树的children
    label: 'name' //设置树的名字属性字段
  })

  // 树的点击事件
  const handleNodeClick = (data: DeptModel) => {
    selectNode.id = data.id
    selectNode.name = data.name
    console.log(selectNode)
    emit('treeClick', data.id)
  }

  // 获取树的数据
  const getTreeData = async () => {
    let res = await getLeftTreeApi()
    if (res && res.code == 200) {
      treeData.data = res.data
      // 处理默认选中第一个节点
      // 这里使用的是通过获取属性名的方式来实现，也可以通过ref来获取
      // 这里使用ref会比较困难，在admin和长期工项目，有比较清晰的解释
      nextTick(() => {
        const nodes = document.querySelector('.el-tree-node') as any
        if (nodes) {
          nodes.click()
        }
      })
    }
  }

  const openBtn = (data: DeptModel) => {
    data.open = !data.open
    if (parentTree.value) {
      parentTree.value.store.nodesMap[data.id].expanded = !data.open
    }
  }

  onMounted(() => {
    getTreeData()
  })

  return {
    treeData,
    defaultProps,
    handleNodeClick,
    getTreeData,
    selectNode,
    openBtn,
    parentTree
  }
}
